@import '../../var';
page {
  background-color: $primary-color;
  .section {
    position: relative;
    .userImg {
      width: 164rpx;
      height: 164rpx;
      margin: 0 auto 84rpx;
      overflow: hidden;
      background-color: $img-color;
      border-radius: 50%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .inviteBox {
      position: relative;
      width: 490rpx;
      margin: auto;
      padding-bottom: 60rpx;
      background-color: #fff;
      border-radius: 15rpx;
      box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
      .title {
        position: relative;
        top: -35rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 415rpx;
        height: 54rpx;
        margin: auto;
        image {
          position: absolute;
          z-index: 0;
          width: 100%;
          height: 100%;
        }
        text {
          position: absolute;
          z-index: 2;
          color: #fff;
          font-size: 22rpx;
        }
      }
      .inviteCode {
        position: relative;
        width: 340rpx;
        height: 100rpx;
        margin: auto;
        border: 3rpx solid #7471f6;
        border-radius: 10rpx;
        .titleBox {
          position: absolute;
          top: -15rpx;
          left: 120rpx;
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 100rpx;
          color: #7471f6;
          font-size: 21rpx;
          background-color: #fff;
          .round {
            width: 8rpx;
            height: 8rpx;
            background-color: #7471f6;
            border-radius: 50%;
          }
        }
        .content {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          font-weight: bold;
          font-size: 42rpx;
        }
      }
      .canvas {
        width: 200rpx;
        height: 200rpx;
        margin: 70rpx auto 32rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .tips {
        width: 100%;
        font-size: 19rpx;
        text-align: center;
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 750rpx;
    height: 460rpx;
    .bgImg {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .logo {
      position: absolute;
      bottom: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      padding-bottom: 50rpx;
      image {
        border-radius: 15rpx;
        width: 266rpx;
        height: 44rpx;
        margin-bottom: 30rpx;
      }
      .footerTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 20rpx;
        margin-bottom: 10rpx;
        padding: 0rpx 242rpx;
        .line {
          width: 46rpx;
          height: 2rpx;
          background-color: #fff;
        }
        .text {
          flex: 1;
          color: #fff;
          font-size: 20rpx;
          text-align: center;
        }
      }
    }
  }
}
